<template>
    <router-view />
    <audio 
    v-show="isShow" 
    ref="audioRef" 
    preload
    @ended="playMusicStore().endPlayback()"
    @timeupdate="playMusicStore().updateTime()"/>
    <el-backtop class="back-top-box" :right="10" :bottom="50" :visibility-height="300">
        <svgIcon class="huojian-icon" iconName="icon-huojian"></svgIcon>
    </el-backtop>
</template>

<script setup>
import { nextTick, ref, onMounted } from 'vue';
import { playMusicStore } from '@/store/music/playmusic';
import svgIcon from '@/components/system/svgicon/svgicon.vue';

// ========================= 实列挂载之后调用 =========================
// 初始化播放器
let isShow = ref(false);
const audioRef = ref();
onMounted(() => {
    nextTick(() => {
        isShow.value = true;
        playMusicStore().initMusic(audioRef.value);
    })
});
</script>

<style lang="scss" scoped>
.back-top-box {
    background-color: transparent;
    box-shadow: none;
    width: 50px;
    height: 50px;
    .huojian-icon {
        width: 3em;
        height: 3em;
        background-color:transparent;
        border-radius: 50%;
        transition: all .3s;
    };
};
.back-top-box:hover {
    .huojian-icon {
        transform:translateY(-15%);
    };
};

</style>

